<template>
	<view class="apption">
    <!-- <view class="searchInput">
      <input class="uni-input" confirm-type="search" placeholder="时尚百搭款" v-model="searchValue" />
      <button class="mini-btn" type="default" size="mini" @click="searchClick()">搜索</button>
    </view> -->
		<view class="bodyCont">
      <view class="historySearch">
        <view class="top">
          <text class="title">搜索历史</text>
          <uni-icons type="trash" color="#c0c4cc" size="16" @click="deleteOldClick()" />
        </view>
        <view class="listCont">
          <view v-for="list,index in oldSearch" :key="index" class="list" @click="oldSearchClick(list)">{{ list }}</view>
        </view>
      </view>
      <view class="hotSearch">
        <view class="top">
          <text class="title">热门搜索</text>
        </view>
        <view class="listCont">
          <view v-for="list,index of hotSearch" :key="index" class="list" @click="hotSearchClick(list)">{{ list.keyword }}</view>
        </view>
      </view>
      <view class="imageTextTop">
        <text class="title">热门商品</text>
      </view>
			<view class="imageTextBox withinBox">
        <view v-if="goodsListData.length>0" class="imageTextBox withinBox">
          <view v-for="list,index of goodsListData" :key="index" class="list">
            <image class="listImage" :src="list.logo"></image>
            <view class="tips_info" @click="commodityClick(list)">
                <image src="@/static/listbg.png" class="bg"></image>
                <view class="text">
                  <view class="oldPrice">¥{{ list.market_price }}</view>
                  <view class="price">¥{{ list.discount_price }}</view>
                  <view v-if="list.is_pre==1" class="openTime">预售倒计时 {{ formatDate(list.end_time) }}</view>
                  <view v-if="list.is_pre==0" class="openTime">开团时间 {{ formatDate(list.put_time) }}</view>
                  <view class="residueNum">剩余数量 {{ list.stock }}</view>
                </view>
              </view>
              <button v-if="list.live_status===1" class="mini-btn statusBut" type="default" size="mini">直播中</button>
              <view class="contText">
                <view class="name">{{ list.title }}</view>
                <view class="downBox">
                  <button v-if="list.label" class="tuijianBut" type="default" size="mini">{{ list.label }}</button>
                  <view v-if="!list.label" />
                  <view class="shareBut">
                    <icon class="icoShare" />分享
                    <button class="wx-button" open-type="share" :data-obj="list">隐藏的分享按钮</button>
                  </view>
                </view>
              </view>
            </view>
        </view>
        <view v-else class="noData">
          <image src="../../static/nodata.png" class="noImage"></image>
          <view class="textFont">暂无数据</view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
import { getApi, postApi } from "@/api/index.js"
import moment from 'moment'
	export default {
		data() {
			return {
				title: 'Hello',
        searchValue: '',
        partitionData: [],
        partitionDataValue: '',
        queryData: '',
				oldSearch: [],
        hotSearch: [],
        goodsListData: [],
				currentTime: ''
			}
		},
    // 分享...
    onShareAppMessage(options) {
      if (options.from === 'button') {
        // 从按钮点击分享时的处理逻辑
        let item = options.target.dataset.obj; // 假设您的按钮有自定义数据属性data-obj来绑定商品数据
        console.log(item)
        return {
          title: item.title, // 商品标题
          path: `/pages/detail/detail?id=${item.id}`, // 商品详情页路径
          imageUrl: item.logo // 商品图片地址
        };
      }
    },
		onLoad(option) {
      // console.log(option)
      uni.setNavigationBarTitle({
        title: '团品搜索' // 设置为你想要显示的标题文本
      });
			postApi('/index/hotSearch').then(res => {
			  if(res.code === 1){
			    this.hotSearch = res.data
			    this.init()
			  }
			}).catch(err => {
			})
      wx.showShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'] //'shareAppMessage'打开分享好友功能 | 'shareTimeline'打开分享到朋友圈功能
      });
		},
    onShow() {
			this.searchValue = ''
			// 获取本地数据
			uni.getStorage({
				key: 'searchData',
				 success: (res) => {
					console.log('本地数据', res.data)
					this.oldSearch = res.data
				}
			})
    },
		methods: {
      formatDate(date) {
        return moment(date).format('YYYY/MM/DD') // 格式化日期
      },
      init(){
        let obj={
          is_hot: 1,
          page: 1,
          limit: 10
        }
        this.loading = true
        postApi('/goods/goodsList', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            this.goodsListData = res.data.list
          }
        }).catch(err => {
          this.loading = false
        })
      },
      searchClick(){ // 输入框搜索，储存本地
        console.log(this.searchValue)
				this.oldSearch.push(this.searchValue)
				// 设置本地数据
				uni.setStorage({
					key: 'searchData',
					data: this.oldSearch,
					success: (res) => {
						console.log('数据保存成功！', this.oldSearch)
					}
				});
        uni.navigateTo({
          url: `/pages/search/result?searchValue=`+this.searchValue
        })
      },
			oldSearchClick(row){
        uni.navigateTo({
          url: `/pages/search/result?searchValue=` + row
        })
      },
      hotSearchClick(row){
        uni.navigateTo({
          url: `/pages/search/result?searchValue=` + row.keyword
        })
      },
			deleteOldClick(){
				uni.showModal({
					title: '提示',
					content: '您确定要删除搜索记录吗？',
					success: function (res) {
						if (res.confirm) {
							// 用户点击了确定，执行删除操作
							console.log('用户点击了确定');
							// 在这里调用你要执行的删除函数
							// 设置本地数据为空
							uni.setStorage({
								key: 'searchData',
								data: [],
								success: function () {
									console.log('数据保存成功！');
								}
							});
						} else if (res.cancel) {
							// 用户点击了取消
							console.log('用户点击了取消');
						}
					}
				})
			},
			commodityClick(row){ // 跳转商品详情页，直播中则跳转直播url
			  if(row.live_status===1){
			    uni.navigateTo({
			      url: `/pages/detail/detail?id=` + row.id
			    })
			  }else{
			    uni.navigateTo({
			      url: `/pages/detail/detail?id=` + row.id
			    })
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
.apption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	background: #F4F5F8;
  .searchInput{
    width: 100%;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .uni-input{
      width: calc(100% - 122rpx);
      height: 62rpx;
      padding-left: 20rpx;
      background: #fff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      color: #000000;
    }
    .mini-btn{
      width: 122rpx;
      background: #74C4BC;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }
  .historySearch{
    padding: 20rpx 0;
    .top{
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      .title{
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
    }
    .listCont{
      display: flex;
      flex-wrap: wrap;
      .list{
        margin-right: 30rpx;
        background: rgba(0,0,0,0.02);
        border: 2rpx solid rgba(0,0,0,0.02);
      }
    }
  }
  .hotSearch{
    padding: 20rpx 0;
    .top{
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      .title{
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
  .bodyCont{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .listCont{
      display: flex;
      flex-wrap: wrap;
      .list{
        margin-right: 30rpx;
        padding: 0 30rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        border: 2rpx solid #F1F0F0;
				background: #EAEBEE;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
      }
    }
    .imageTextTop{
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      .title{
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }
}
</style>
